---
title: 사용자 지정 아바타
description: 앱의 사용자 아바타를 사용자 정의하기
---

# 사용자 지정 아바타

## 앱의 사용자 아바타를 사용자 정의하기

기본적으로 사용자가 ENS 이미지를 설정하지 않는 경우 아바타를 제공하지만, 사용자 지정 아바타 컴포넌트를 제공하여 이를 사용자 정의할 수 있습니다. TypeScript를 사용하는 경우 `AvatarComponent` 유형을 가져올 수 있습니다:

```tsx
import {
  RainbowKitProvider,
  AvatarComponent,
} from '@rainbow-me/rainbowkit';
import { generateColorFromAddress } from './utils';

const CustomAvatar: AvatarComponent = ({ address, ensImage, size }) => {
  const color = generateColorFromAddress(address);
  return ensImage ? (
    <img
      src={ensImage}
      width={size}
      height={size}
      style={{ borderRadius: 999 }}
    />
  ) : (
    <div
      style={{
        backgroundColor: color,
        borderRadius: 999,
        height: size,
        width: size,
      }}
    >
      :^)
    </div>
  );
};

const App = () => {
  return (
    <RainbowKitProvider avatar={CustomAvatar} {...etc}>
      {/* ... */}
    </RainbowKitProvider>
  );
};
```

`AvatarComponent`는 `avatar` 속성에 전달되며 다음과 같은 prop 유형을 가집니다: `<{ address: string; ensImage?: string | null; size: number;}>`
